<template>
<div id="classify">
  <nav-bar class="classify-nav">
    <div slot="left"><img src="~assets/img/jiantou_left.png" @click="toHome"></div>
    <div slot="center"><input type="text" placeholder="格力变空调"></div>
    <div slot="right"><img src="~assets/img/more.png" style="width: 30px;height: 30px"></div>
  </nav-bar>
  <div class="classify-main">
    <div class="classify-left">
      <p :class="{active_p: index === p_index}" v-for="(item,index) in calssifyList" @click="btpClick(index)">{{item.name}}</p>
    </div>
    <div class="classify-right">
      <ClassifyLists :title="calssifyList[index_title]" :classify="goods[select].list"></ClassifyLists>
    </div>
  </div>
<!--  <p v-for="item in calssifyList">{{item.name}}</p>-->
</div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import ClassifyLists from "views/classify/ClassifyLists";
import {getClassifyData,getGoodsPopular,
  getGoods,getGoodsSelected,getGoods4,getGoods5,getGoods6} from "network/home";
export default {
  name: "Classify",
  data(){
    return {
      calssifyList: [],
      p_index: 0,
      index_title: 0,
      goods: {
        "recommend": {list: []},
        "popular": {list: []},
        "selected": {list: []},
        "goods1": {list: []},
        "goods2": {list: []},
        "goods3": {list: []},
      },
      select: "recommend"
    }
  },
  components: {
    NavBar,
    ClassifyLists
  },
  methods: {
    toHome(){
      this.$router.replace("/home");
    },
    btpClick(index){
      this.index_title = index;
      this.p_index = index;
     /* if(index==0){
        this.select = "recommend"
      }
      if(index==1){
        this.select = "selected"
      }*/
      switch (index)
      {
        case 0: this.select = "recommend";break;
        case 1: this.select = "popular";break;
        case 2: this.select = "selected";break;
        case 3: this.select = "goods1";break;
        case 4: this.select = "goods2";break;
        case 6: this.select = "goods3";break;
        case 7: this.select = "goods2";break;
        case 8: this.select = "goods1";break;
        case 9: this.select = "selected";break;
        case 10: this.select = "popular";break;
        case 11: this.select = "recommend";break;
        case 12: this.select = "goods3";break;
        case 13: this.select = "goods2";break;
        case 14: this.select = "goods1";break;
        case 15: this.select = "recommend";break;
        case 16: this.select = "selected";break;
        case 17: this.select = "popular";break;
        case 18: this.select = "goods3";break;
        case 19: this.select = "goods1";break;
        case 20: this.select = "goods2";break;
        case 21: this.select = "recommend";break;
        case 22: this.select = "popular";break;
        case 23: this.select = "selected";break;
        case 24: this.select = "goods1";break;
        case 25: this.select = "goods2";break;
        case 26: this.select = "goods3";break;
        case 27: this.select = "goods2";break;
        case 28: this.select = "goods1";break;
        case 29: this.select = "selected";break;
        case 30: this.select = "popular";break;
        case 31: this.select = "recommend";break;
        case 32: this.select = "goods3";break;
        case 33: this.select = "goods2";break;
        case 34: this.select = "goods1";break;
        case 35: this.select = "recommend";break;
        case 36: this.select = "selected";break;
        case 37: this.select = "popular";break;
        case 38: this.select = "goods3";break;
        case 39: this.select = "goods1";break;
        case 40: this.select = "goods2";break;
        case 41: this.select = "selected";break;
        case 42: this.select = "popular";break;
        case 43: this.select = "recommend";break;
        case 44: this.select = "goods1";break;
      }
    }
  },
  created() {
    //请求商品分类
    getClassifyData().then(res =>{
      console.log(res.data.data);
      this.calssifyList = res.data.data;
    }).catch(err =>{
      console.log(err);
    });
    //请求首页流行商品
    getGoodsPopular().then(res => {
      // console.log(res.data);
      this.goods.recommend.list = res.data.data.list;
    }).catch(err => {
      console.log(err);
    });

    getGoods().then(res => {
      this.goods.popular.list= res.data.data.list;
      // console.log(res.data.data.list);
    }).catch(err => {
      console.log(err);
    });

    //请求首页精选商品
    getGoodsSelected().then(res => {
      // console.log(res.data.data.list);
      this.goods.selected.list = res.data.data.list;
    }).catch(err => {
      console.log(err);
    });
    getGoods4().then(res => {
      // console.log(res.data.data.list);
      this.goods.goods1.list = res.data.data.list;
    }).catch(err => {
      console.log(err);
    });
    getGoods5().then(res => {
      // console.log(res.data.data.list);
      this.goods.goods2.list = res.data.data.list;
    }).catch(err => {
      console.log(err);
    });
    getGoods6().then(res => {
      this.goods.goods3.list = res.data.data.list;
      // console.log(res.data.data.list);
    }).catch(err => {
      console.log(err);
    });
  }
}
</script>

<style scoped>
.classify-nav{
  font-size: 20px;
  color: #EEEEEE;
  border-bottom: 1px #EEEEEE solid;
}
.classify-nav div img{
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-top: -3px;
}
.classify-nav div input{
  text-align: center;
  font-size: 14px;
  width: 100%;
  height: 25px;
  border-radius: 20px;
  background-color: #EEEEEE;
  border: 0;
  outline: none;
}
.classify-main{
  width: 100%;
}
.classify-main div{
  display: inline-block;
  float: left;
}
.classify-left{
  text-align: center;
  font-size: 14px;
  background-color: #EEEEEE;
  width: 25%;
  margin-bottom: 50px;
}
.classify-right{
  width: 75%;
}
.active_p{
  color: red;
}
</style>
